<template>
    <div>
        <div class="searchTop">
            <van-nav-bar title="商品搜索" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="searchBox">
            <!-- 搜索框部分 -->
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" clearable>
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
            <!-- 最近搜索部分 -->
            <div class="recentSearch" v-if="ifshow">
                <div class="title">
                    <div class="left">最近搜索</div>
                    <div class="right" @click="ClearSearchList">
                        <van-icon name="delete-o" />
                    </div>
                </div>
                <div class="tags">
                    <van-tag v-for="(item, index) in searchList" :key="index" type="primary" size="large" plain
                        @click="value = item; onSearch()" round color="#000">
                        {{ item }}
                    </van-tag>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'searchIndex',

    data() {
        return {
            ifshow: false,
            value: '',
            searchList: [],
        };
    },

    mounted() {
    },
    created() {
        //获取本地存储的搜索历史
        const history = localStorage.getItem('hx_search_history');
        if (history) {
            this.searchList = JSON.parse(history);
            this.ifshow = true;
        }
    },
    methods: {
        // 返回上一页
        onClickLeft() {
            this.$router.go(-1);
        },
        // 搜索功能
        onSearch() {
            if (this.value.trim() === '') {
                this.$toast('请输入搜索关键词');
                return;
            }
            // 将搜索关键词添加到最近搜索列表中，避免重复
            if (!this.searchList.includes(this.value)) {
                this.searchList.push(this.value);
                //判断搜索历史是否超过10条，超过则删除最早的一条
                if (this.searchList.length > 10) {
                    this.searchList.shift();
                }
                //将搜索历史存储到本地
                localStorage.setItem('hx_search_history', JSON.stringify(this.searchList));
            }
            // 跳转到搜索结果页面，并传递搜索关键词 
            this.$router.push({ path: '/searchlist', query: { keyword: this.value } });
            // 清空搜索框
            this.value = '';
            // 显示最近搜索部分
            this.ifshow = true;
        },
        // 清空搜索历史     
        ClearSearchList() {
            this.searchList = [];
            localStorage.removeItem('hx_search_history');
            this.ifshow = false;
        },
    },
};
</script>
<style lang="scss" scoped>
//最近搜索部分
.recentSearch {
    padding: 20px;

    .title {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .left {
            text-align: left;
        }

        .right {
            text-align: right;
            color: #999;
        }
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
}
</style>